import { ArrowUpOutlined } from '@ant-design/icons'
import { Card, Divider, Row, Col, Statistic } from 'antd'
import React, { Component } from 'react'

export default class Dashboard extends Component {
    render() {
        return (
            <div style={{ padding: '20px' }}>
                <h3 style={{ paddingLeft: '15px', paddingRight: '15px' }}>数据汇总</h3>
                <Divider />

                <Row gutter={[16, 16]} justify='center'>
                    <Col xs={{
                        span: 7,
                        offset: 1,
                    }}>
                        <Card title="新增用户" >
                            <Statistic
                                title="新增用户"
                                value={80}
                                prefix={<ArrowUpOutlined />}
                            />
                        </Card>
                    </Col>
                    <Col xs={{
                        span: 7,
                        offset: 1,
                    }}>
                        <Card title="总用户" >
                            <Statistic
                                title={<span style={{ fontSize: '12px' }}>总用户</span>}
                                value={840}
                                prefix={<ArrowUpOutlined />}
                            />
                        </Card>
                    </Col>
                    <Col xs={{
                        span: 7,
                        offset: 1,
                    }}>
                        <Card title="今日订单" >
                            <Statistic
                                title="今日订单"
                                value={80}
                                prefix={<ArrowUpOutlined />}
                            />
                        </Card>
                    </Col>
                </Row>

                <h3 style={{ paddingLeft: '15px', paddingRight: '15px' }}>其他统计</h3>
                <Divider />
            </div>
        )
    }
}
